<template>
  <div class="wrap">
    <div class="item">
      <img
        src="../assets/fenxi.svg"
        style="width: 40px; height: 40px; margin-right: 15px"
      />
      <span class="title">数据分析平台</span>
    </div>

    <div class="item">
      <el-button class="new-btn"
        ><i class="iconfont iconxinjianduihua icon"></i>新建对话</el-button
      >
    </div>

    <div class="list">
      <div class="divder"></div>
      <div v-for="(items, key) in historyData">
        <div class="key">{{ key }}</div>
        <!-- 修改后的代码 -->
        <div v-for="it in items" class="it ellipsis">
          {{ it }}
        </div>
      </div>
    </div>

    <div class="my">个人中心</div>
  </div>
</template>

<script>
import { bus } from "../eventBus";
export default {
  name: "LeftMenu",
  data() {
    return {
      historyData: {
        今天: [
          "查询昨日产品生产数量并绘制图表",
          "分析过去5天的产能情况并给出建议",
        ],
        本周: [
          "给出产品列表以及产品的详细信息",
          "分析过去一周产线的报警情况，以列表形式展示",
        ],
        本月: ["当前产线的温湿度详情", "产线各个设备的运行情况，并给出建议"],
        更早: [
          "查询过去一个月的设备停机情况",
          "分析设备的生产情况给出优化建议",
          "产品缺陷识别情况和缺陷率分析建议",
          "过去一周维修保养记录和设备列表",
        ],
      },
    };
  },
  computed: {
    menuClass() {
      return {
        item: true,
        "item-active": this.currentItem == 0,
      };
    },
  },
  mounted() {
    bus.on("message-sent", (message) => {
      // 修改为使用 unshift 方法将消息添加到数组头部
      this.historyData["今天"].unshift(message);
    });
  },
  methods: {
    menuClick(index) {
      this.currentItem = index;
      this.currentChildItem = -1;
    },
    childMenuClick(index) {
      this.currentChildItem = index;
      this.currentItem = -1;
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 250px;
  height: 100vh;
  background: #f3f4f6;
  padding: 20px;
  box-sizing: border-box;
  display: flex; /* 添加 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
}
.divder {
  height: 1px;
  background-color: #e8e8e8;
  margin: 20px 0;
}
.key {
  color: #767677;
  height: 45px;
  line-height: 45px;
}
.it {
  height: 45px;
  line-height: 45px;
  cursor: pointer;
  color: #414141;
  font-size: 16px;
}
/* 新增样式 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.it:hover {
  background-color: #e8e8e8;
  border-radius: 10px;
}
.icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.item {
  display: flex;
  align-items: center;
  height: 60px;
  color: #242425;
  text-align: left;
  cursor: pointer;
}
.item-active {
  background-color: #fff;
}
.title {
  font-size: 18px;
}

.child-menu {
  display: flex;
  align-items: center;
  height: 60px;
  flex: 1;
  color: #767677;
  text-align: left;
  cursor: pointer;
  padding-left: 40px;
}
.child-menu-active {
  background-color: #fff;
}

.new-btn {
  width: 100%;
  line-height: 20px;
  border: none;
}
.icon {
  margin-right: 10px;
}

.list {
  flex: 1; /* 让 .list 部分占据剩余的空间 */
  overflow-y: auto; /* 超出高度后出现垂直滚动条 */
}
.my {
  height: 60px;
  line-height: 60px;
}
</style>
